<template>
	<!-- 商品详情 -->
	<view class="shoppingInfo-main" v-if="shopInfo">
		<!-- 轮播图 -->
		<view class="shoppingInfo-swiper">
			<u-swiper :list="shopSwiperData" height="350" @change="(e) => (currentNum = e.current)" :autoplay="false" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ shopSwiperData.length == 0 ? '0' : currentNum + 1 }}/{{ shopSwiperData.length }}</text>
				</view>
			</u-swiper>
		</view>

		<!-- 商品数据 -->
		<view class="shoppingInfos">
			<view class="price">
				<view class="prices">
					<text style="font-size: 24rpx">￥</text>
					{{ getShopPrice(shopInfo) }}
				</view>
				<view class="optionIcon">
					<view class="icons" @click="getShare">
						<button open-type="share" class="shareBtn">
							<uni-icons type="redo" size="20" style="margin-bottom: 4rpx"></uni-icons>
							<text style="font-size: 24rpx">分享</text>
						</button>
					</view>
					<view class="icons" @click="getChangeStar">
						<uni-icons type="star" size="20" style="margin-bottom: 4rpx" v-if="!shopInfo.is_collected"></uni-icons>
						<uni-icons type="star-filled" size="20" style="margin-bottom: 4rpx" color="#ffcb00" v-else></uni-icons>
						<text style="font-size: 24rpx">收藏</text>
					</view>
				</view>
			</view>

			<view class="shopName">
				{{ shopInfo.name || '暂无数据' }}
			</view>

			<view class="monthlySale">
				月销
				<text style="padding: 0px 6rpx">999</text>
				件
			</view>

			<view class="tags">
				<uni-tag :text="shopInfo.mediaName" type="error" size="mini" />
			</view>
		</view>

		<!-- 提示 -->
		<view class="Tips">
			<uni-icons type="checkbox" size="20" style="margin-right: 10rpx" color="red"></uni-icons>
			<text v-if="shopInfo.recipeType == '1'">保健食品不是药物，不能代替药物治疗疾病。</text>
			<text v-if="shopInfo.recipeType == '0'">非处方药（OTC）请仔细阅读说明书并按说明使用或在药师指导下购买和使用</text>
		</view>

		<!-- 商品详情 -->
		<view class="shopInfoContent">
			<view class="shopInfoContent-title">商品详情</view>
			<!-- 规格 -->
			<view class="shopInfoContent-form">
				<uni-table ref="table" stripe border emptyText="暂无更多数据">
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td v-if="item.value" style="width: 100px">
							{{ item.name }}
						</uni-td>
						<uni-td v-if="item.value">
							{{ item.value }}
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<!-- 详情图片或者富文本 -->
			<view class="shopInfoContents">
				<rich-text :nodes="richText(shopInfo.content)" v-if="shopInfo.content"></rich-text>
			</view>
		</view>

		<view style="height: 200rpx"></view>

		<!-- 加购 -->
		<view class="addToCart" :style="bottomStyle">
			<view class="addToCart-option">
				<view class="option-item" @click="gotoHome">
					<view class="option-icon">
						<uni-icons type="home-filled" size="26" color="#555"></uni-icons>
					</view>
					<text class="option-title">首页</text>
				</view>
				<view class="option-item" @click="gotoPath('')">
					<view class="option-icon">
						<uni-badge :text="null" absolute="rightTop" size="small">
							<uni-icons type="chatboxes-filled" size="26" color="#555"></uni-icons>
						</uni-badge>
					</view>
					<text class="option-title">客服</text>
				</view>
				<view class="option-item" @click="gotoPath('/pages/shoppingCart/shoppingCart')">
					<view class="option-icon">
						<uni-badge :text="cartNum" absolute="rightTop" size="small">
							<uni-icons type="cart-filled" size="26" color="#555"></uni-icons>
						</uni-badge>
					</view>
					<text class="option-title">购物车</text>
				</view>
			</view>

			<view class="addToCart-btn">
				<view class="addToCart-btn-left" @click="addShoppingCart">加入购物车</view>
				<view class="addToCart-btn-right" @click="buyNow">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
import { homeGoodsDetail, cloudAddCart, userCollect, cloudCartNum } from '../../api/home/index.js';
import { imageUrl } from '../../utils/tools.js';
export default {
	data() {
		return {
			// 商品图片
			shopSwiperData: [],
			// 图片下标
			currentNum: 0,
			// 是否收藏
			isStar: false,
			// 商品规则
			tableData: [
				{
					name: '通用名',
					key: 'name',
					value: ''
				},
				{
					name: '批准文号',
					key: 'fileno',
					value: ''
				},
				{
					name: '规格',
					key: 'spec',
					value: ''
				},
				{
					name: '条形码',
					key: 'barcode',
					value: ''
				},
				{
					name: '品牌',
					key: 'shopName',
					value: ''
				},
				{
					name: '生产企业',
					key: 'factory',
					value: ''
				},
				{
					name: '基础单位',
					key: 'unit',
					value: ''
				},
				{
					name: '用法用量',
					key: 'usages',
					value: ''
				},
				{
					name: '注意事项',
					key: 'usages',
					value: ''
				}
			],
			// 商品详情
			shopInfo: null,
			cartNum: null,

			shop_id: '',
			ratio: 0
		};
	},

	onShareAppMessage() {
		return {
			title: '健康视频',
			path: `pages/healthVideo/healthVideo?id=${this.shop_id}`
		};
	},

	onShareTimeline() {
		return {
			title: '健康视频',
			query: `pages/healthVideo/healthVideo?id=${this.shop_id}`
		};
	},

	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},

	async onLoad(option) {
		const { id } = option;
		this.shop_id = id;
		this.ratio = this.$store.state.commInitInfo.yyd_ratio;
		await this.getShopInfo(id);
		await this.getcloudCartNum();
	},
	methods: {
		gotoPath(path) {
			uni.switchTab({
				url: path
			});
		},

		gotoHome() {
			uni.switchTab({
				url: '/pages/nationwideDelivery/nationwideDelivery'
			});
		},
		
		richText(content) {
			if (content) {
				const regex = new RegExp('<img', 'gi');
				let richtext = content.replace(regex, `<img style="max-width: 100%;"`);
				return richtext;
			} else {
				return '';
			}
		},

		async getcloudCartNum() {
			try {
				const resData = await cloudCartNum({
					type: this.shopInfo.type
				});
				this.cartNum = resData.data;
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		},

		// 加入购物车
		async addShoppingCart(id) {
			try {
				const queryData = {
					id: this.shopInfo.id,
					num: 1
				};
				const resData = await cloudAddCart(queryData);
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				});
			} catch (e) {
				throw Error(e);
			}
		},

		// 立即购买
		buyNow() {
			uni.navigateTo({
				url: `/pages/submitOrder/submitOrder?type=${this.shopInfo.type}`
			});

			// 清除购物车缓存数据
			this.$store.commit('clearCartShopList');
			const shopInfoArr = [];
			shopInfoArr.push({
				...this.shopInfo,
				num: 1
			});

			// 勾选的商品
			this.$store.dispatch('getCartShopListAsync', shopInfoArr);
		},

		// 分享
		getShare() {
			// 通用的分享逻辑
			const title = this.shopInfo.name;
			const description = '商品描述';
			const imageUrl = this.shopSwiperData[0];

			if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
				// App 端分享
				this.shareApp(title, description, imageUrl);
			} else {
				// 小程序端分享
				uni.showShareMenu({
					title,
					withShareTicket: true
				});
			}
		},

		// app分享
		shareApp(title, description, imageUrl) {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				href: '',
				title: title,
				content: description,
				imageUrl: imageUrl
			});
		},

		// 收藏
		async getChangeStar() {
			try {
				const resData = await userCollect({
					id: this.shopInfo.id
				});
				this.shopInfo.is_collected = !this.shopInfo.is_collected;
				uni.showToast({
					title: resData.msg,
					icon: 'none'
				});
			} catch (e) {
				throw Error(e);
			}
		},

		// 商品详细信息
		async getShopInfo(id) {
			try {
				const resData = await homeGoodsDetail({
					id
				});
				this.shopInfo = resData.data;
				this.shopInfoTable(this.shopInfo);
				let swiperList = resData.data.fileUrl;
				const imageList = swiperList.split(',');
				imageList.forEach((item) => {
					this.shopSwiperData.push(imageUrl(item));
				});
			} catch (e) {
				throw Error(e);
			}
		},

		// 商品详情数据收集
		shopInfoTable(shopInfo) {
			this.tableData.forEach((item) => {
				item.value = shopInfo[item.key] || '';
			});
		},

		getShopPrice(item) {
			// 云店根据费率计算
			if (item.type == 0) {
				if (!item.store_id) {
					let pic = item.price != '0.00' ? item.price : item.saleprice;
					return (Number(pic) + (Number(pic) * this.ratio) / 100).toFixed(2);
				} else {
					return item.price != '0.00' ? item.price : item.saleprice;
				}
			} else {
				return item.price != '0.00' ? item.price : item.saleprice;
			}
		}
	}
};
</script>

<style></style>

<style scoped lang="scss">
button:after {
	border: none !important;
}
.shoppingInfo-main {
	.shoppingInfos {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #ffffff;
		.price {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.prices {
				color: red;
				font-size: 40rpx;
				font-weight: bold;
			}

			.optionIcon {
				display: flex;
				justify-content: space-around;
				width: 160rpx;
				.icons {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					font-size: 24rpx;

					.shareBtn {
						padding: 0px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						background-color: transparent;
						line-height: normal;
						font-size: 28rpx;
					}
				}
			}
		}

		.shopName {
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 20rpx;
			margin-bottom: 6rpx;
		}

		.monthlySale {
			font-size: 26rpx;
			color: #999;
			margin-bottom: 15rpx;
		}
	}

	.Tips {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 24rpx;
		background-color: #ececec;
		margin-bottom: 30rpx;
		color: #999;
	}

	.shopInfoContent {
		background-color: #ffffff;
		.shopInfoContent-title {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
		}

		.shopInfoContent-form {
			box-sizing: border-box;
			padding: 40rpx 20rpx;
			padding-top: 0px;
		}

		.shopInfoContents {
			box-sizing: border-box;
			padding: 0px 20rpx;
		}
	}

	.addToCart {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 20rpx;
		padding-top: 20rpx;
		background-color: #fff;
		color: #555;
		border-top: 1px #f3f3f3 solid;
		.addToCart-option {
			flex: 1;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.option-item {
				flex: 1;
				margin-right: 15rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.option-title {
					margin-top: 4rpx;
				}
			}
		}
		.addToCart-btn {
			width: 430rpx;
			display: flex;
			align-items: center;
			color: #ffffff;
			font-size: 28rpx;

			.addToCart-btn-left {
				background: linear-gradient(90deg, rgb(255, 119, 0), rgb(255, 73, 0));
				height: 90rpx;
				width: 190rpx;
				line-height: 90rpx;
				text-align: center;
				padding: 0px 30rpx;
				border-top-left-radius: 45rpx;
				border-bottom-left-radius: 45rpx;
			}

			.addToCart-btn-right {
				background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));
				height: 90rpx;
				width: 190rpx;
				line-height: 90rpx;
				text-align: center;
				padding: 0px 30rpx;
				border-top-right-radius: 45rpx;
				border-bottom-right-radius: 45rpx;
			}
		}
	}
}

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	display: flex;
	align-items: center;
	justify-content: center;

	&__text {
		color: #ffffff;
		font-size: 12px;
	}
}
</style>
